﻿@model BudgetMealsUI.Models.RecipeSelectorViewModel

@if (Model != null && !string.IsNullOrEmpty(Model.SearchString) && Model.Recipes.Count() > 0)
{
    if (Model.PagingInfo.HasPreviousPage)
    {
        <div class="MealEditArrow" id="MealArrowLeft" onclick="ShiftRecipe(-1)" style="float: left"></div>
    }

    if (Model.PagingInfo.HasNextPage)
    {
        <div class="MealEditArrow" id="MealArrowRight" onclick="ShiftRecipe(1)" style="float: right;"></div>
    }

    <div id="RecipeSelectorWrapper">
        @foreach (var recipe in Model.Recipes)
        {
            <div id="RecipeSelectorContent@(recipe.RecipeID)" class="RecipeSelector" style="float: left;">
            <h2>@recipe.Name</h2>
            <div>
                <h3>Ingredients</h3>
                @if (recipe.Ingredients != null)
                {
                    foreach (var ingredient in recipe.Ingredients)
                    {
                        <span style="background-color: rgba(0, 0, 0, .05); border: 1px dashed rgba(0, 0, 0, .1); margin: 2px 0px; display: inline-block;">@ingredient.Name</span>
                    }
                }
                else
                {
                    @:No ingredients found.   
                }
            </div>
            <h3>Summary</h3>
            <div>
                @Html.Raw(recipe.Summary)
            </div>
            <h3>Instructions</h3>
            <div>
                @Html.Raw(recipe.Instructions)
            </div>
        </div>

        <script type="text/javascript">
            $("#RecipeSelectorContent@(recipe.RecipeID)").click(function (event) {
                $("#" + Field + "Name").text("@recipe.Name");
                $("input[name=" + Field + "ID]").val("@recipe.RecipeID");
            }
            );
        </script>
        }
    </div>


}
else
{
    @:No recipe found.
}

<script type="text/javascript">
    var arrowSearchURL = "@Url.Action("SelectorList", "Recipe", new { SearchString = Model.SearchString, SearchUserRecipes = Model.SearchUserRecipes, Page = "PageValue" })".replace(/&amp;/g, "&");
    var page = @Model.PagingInfo.CurrentPage;

    function ShiftRecipe(direction)
    {
        var SelectorContent = $("#SelectorContent");

        SelectorContent.html("<img src=\"@Url.Content("~/Content/Images/Ajax/Loader.gif")\" alt=\"\" />");

        $.ajax(
            { 
                url: arrowSearchURL.replace("PageValue", page + direction),
                success: function (response)
                {
                    SelectorContent.html(response);
                },
                error: function (response)
                {
                    SelectorContent.html("An error occured while searching for the ingredient");
                }
            }
        )

        page = page + direction;
    }
</script>
